<template>
	<view class="container" style="padding-bottom: 120rpx;">
		<u--form ref="queryForm" :model="query">
			<u-form-item label="" prop="containerCode" style="display: flex;">
				<span style="margin-right: 20rpx;">容器码</span>
				<u--input
					placeholder="请输入/扫描"
					v-model.trim="query.containerCode"
					suffixIcon="scan"
					suffixIconStyle="font-size: 68rpx"
					style="flex: 1;"
					@confirm="getDetail"
				>
				</u--input>
			</u-form-item>
			<u-form-item label="" prop="materialCode" style="display: flex;">
				<span style="margin-right: 20rpx;">物料码</span>
				<u--input
					placeholder="请输入/扫描"
					v-model="query.materialCode"
					suffixIcon="scan"
					suffixIconStyle="font-size: 68rpx"
					style="flex: 1;"
				>
				</u--input>
			</u-form-item>
			<u-form-item label="" prop="materialBatch" style="display: flex;">
				<span style="margin-right: 20rpx;">批次号</span>
				<u--input
					placeholder="请输入/扫描"
					v-model="query.materialBatch"
					suffixIcon="scan"
					suffixIconStyle="font-size: 68rpx"
					style="flex: 1;"
				>
				</u--input>
			</u-form-item>
			<u-form-item label="" prop="materialQty" style="display: flex;">
				<span style="margin-right: 50rpx;">数量</span>
				<u--input
					type="number"
					placeholder="请输入/扫描"
					v-model="query.materialQty"
					style="flex: 1;"
				>
				</u--input>
			</u-form-item>
		</u--form>
		<uni-table ref="table" border stripe emptyText="暂无数据" style="margin: 10px 0">
			<uni-tr>
				<uni-th width="25">物料码</uni-th>
				<uni-th width="25">批次号</uni-th>
				<uni-th width="25">数量</uni-th>
				<uni-th width="25">操作</uni-th>
			</uni-tr>
			<uni-tr v-if="item.materialQty === 0 ? false : true" v-for="(item, index) in list" :key="index">
				<uni-td>
					<view class="selectable" @click="checkDetail((item.materialCode))">	
						{{ item.materialCode.slice(0, 9) }}</br>{{ item.materialCode.slice(9, 18) }}
					</view>
				</uni-td>
				<uni-td>
					<view class="selectable">
						{{ item.materialBatch }}
					</view>
				</uni-td>
				<uni-td class="selectable" style="width: 50rpx;">{{ item.materialQty }}</uni-td>
				<uni-td><u-button style="padding: 10px;font-size: 18rpx;" size="medium" type="error" @click="deleteMaterialButton(item)">解 绑</u-button></uni-td>
			</uni-tr>
		</uni-table>
		<view class="buttonStyle">
			<u-button type="primary" text="添加" :disabled="containerStatus === 'full'" @click="aujust"></u-button>
			<u-button type="error" text="设置容器状态" :disabled="containerStatus !== 'full' && containerStatus !== 'notFull'" @click="setContainerStatus"></u-button>
			<u-button type="warning" text="重置" @click="reset"></u-button>
		</view>
		<!-- 模态框 -->
		<u-modal
			:show="showList"
			:title="title"
			@confirm="cancelListModal"
		>
			<view style="display: flex;flex-direction: column;">
				<view style="display: flex;">
					<view style="flex: 2;">物料编号：</view>
					<view style="flex: 3;">{{ selectedMaterial.materialCode }}</view>
				</view>
				<view style="display: flex;">
					<view style="flex: 2;">物料名称：</view>
					<view style="flex: 3;">{{ selectedMaterial.materialName }}</view>
				</view>
				<view style="display: flex;">
					<view style="flex: 2;">物料批次号：</view>
					<view style="flex: 3;">{{ selectedMaterial.materialBatch }}</view>
				</view>
				<view style="display: flex;">
					<view style="flex: 2;">数量：</view>
					<view style="flex: 3;">{{ selectedMaterial.materialQty }}</view>
				</view>
				<view style="display: flex;">
					<view style="flex: 2;">单位：</view>
					<view style="flex: 3;">{{ selectedMaterial.unit }}</view>
				</view>
			</view>
		</u-modal>
		<!-- 模态框2 -->
		<u-modal
		 :show="show"
		 :title="title"
		 :showCancelButton="true"
		 @confirm="deleteMaterial"
		 @cancel="cancelDialog"
		 >
			<u--input
				type="number"
				placeholder="请输入需要解绑的数量"
				v-model="quantity"/>
		 </u-modal>
		<u-toast ref="uToast"></u-toast>
		<u-modal
			:show="showModal"
			:title="modalTitle"
			:content='modalContent'
			:showCancelButton	="true"
			@confirm="confirmSubmit"
			@cancel="cancelModal"
		></u-modal>
		<u-modal
			:show="showDialog"
			title="提示"
			content="请确认容器状态!"
			:showCancelButton	="true"
			confirmText="未满"
			cancelText="已满"
			cancelColor="#fa3534"
			@confirm="confirmNotFull"
			@cancel="confirmFull"
		>
<!-- 			<view slot="default">
				<view style="font-weight: 600;">请确认容器状态！</view>
			</view>
			<view slot="confirmButton" style="display: flex;gap: 10rpx;">
				<u-button type="error" plain>已满</u-button>
				<u-button type="primary" plain>未满</u-button>
			</view> -->
		</u-modal>
	</view>
</template>

<script>
	import {
		uniCard,
		uniTable,
		uniTr,
		uniTd,
		uniTh
	} from '@dcloudio/uni-ui'
	import { updateContainerAPI, getContainerInfoAPI, checkContainerFullAPI, setContainerStatusAPI } from '@/api/work/material'
	export default {
		components: {
			uniCard,
			uniTable,
			uniTr,
			uniTd,
			uniTh
		},
		data() {
			return {
				showModal: false,
				modalTitle: '提示',
				modalContent: '批次号为空, 是否继续添加物料?',
				query: {
					containerCode: '',
					materialCode: '',
					materialBatch: '',
					materialQty: ''
				},
				list: [],
				quantity: '',
				show: false,
				showList: false,
				title: '物料解绑',
				content: 'XXX',
				material: {},
				selectedMaterial: {},
				containerStatus: '',
				showDialog: false
			};
		},
		onLoad(options) {
			uni.$on('scancodedate',(data) => this.getCode(data.code))
		},
		onUnload() {  
		  // 移除监听事件      
		  uni.$off('scancodedate')
		},
		methods: {
			// 扫码
			getCode(code) {
				const pattern = /^[A-Za-z]\d{9}$/
				if (code.length === 18) {
					this.query.materialCode = code
				} else if (pattern.test(code)) {
					this.query.containerCode = code
					this.getDetail()
				} else if (/^WM/.test(code)) {
					this.query.materialBatch = code
				}
			},
			reset() {
				this.query = {
					containerCode: '',
					materialCode: '',
					materialBatch: '',
					materialQty: ''
				}
				this.containerStatus = ''
				this.list = []
				this.selectedMaterial = {}
				this.showModal = false
				this.show = false
				this.showList = false
			},
			checkDetail(val) {
				const foundMaterial = this.list.find(item => item.materialCode === val)
				if (foundMaterial) {
					this.selectedMaterial = foundMaterial
					this.showList = true
				}
			},
			aujust() {
				if (!this.query.materialCode) {
					return this.$refs.uToast.show({
						type: 'warning',
						message: '请扫描物料码'
					})
				}
				if (this.query.materialCode && !this.query.materialQty) {
					return this.$refs.uToast.show({
						type: 'warning',
						message: '请填写数量'
					})
				}
				if (!/^\d+$/.test(this.query.materialQty)) {
					return this.$refs.uToast.show({
						type: 'warning',
						message: '数量必须为数字且大于等于0'
					})
				}
				if (!this.query.materialBatch) {
					return this.showModal = true
				}
				const submitForm = {
					materialCode: this.query.materialCode,
					materialBatch: this.query.materialBatch,
					materialQty: Number(this.query.materialQty)
				}
				this.submit(submitForm)
			},
			cancelListModal() {
				this.showList = false
			},
			cancelModal() {
				this.showModal = false
			},
			confirmSubmit() {
				const submitForm = {
					materialCode: this.query.materialCode,
					materialBatch: this.query.materialBatch,
					materialQty: Number(this.query.materialQty)
				}
				this.submit(submitForm)
			},
			async submit(val) {
				if (val) {
					const submit = {
						containerCode: this.query.containerCode,
						materialCode: val.materialCode,
						materialBatch: val.materialBatch,
						quantity: val.materialQty
					}
					const res = await updateContainerAPI(submit)
					if (res.meta.code === 200) {
						this.query.materialCode = ''
						this.query.materialBatch = ''
						this.query.materialQty = ''
						this.list = []
						this.showModal = false
						this.getDetail()
						this.$refs.uToast.show({
							type: 'success',
							message: res.meta.msg
						})
					} else {
						return this.$refs.uToast.show({
							type: 'warning',
							message: res.meta.msg
						})
					}
				}
			},
			async getDetail() {
				const res = await getContainerInfoAPI(this.query.containerCode)
				if (res.meta.code === 200) {
					this.list = res.data.containerDetails
					const result = await this.checkContainerFull()
					// console.log(result)
					if (result.meta.code === 200) {
						if (result.data.isfull === 0) {
							this.containerStatus = 'notFull'
						} else if(result.data.isfull === 1) {
							this.containerStatus = 'full'
						}
					}
				} else {
					return this.$refs.uToast.show({
						type: 'warning',
						message: res.meta.msg
					})
				}
			},
			cancelDialog() {
				this.show = false
				this.material = {}
				this.quantity = ''
			},
			deleteMaterialButton(item) {
				this.show = true
				this.material = item
				// this.quantity = this.material.materialQty
			},
			async deleteMaterial() {
				if (!/^\d+$/.test(this.quantity)) {
					return this.$refs.uToast.show({
						type: 'warning',
						message: '数量必须是数字且大于等于0',
						position:'top'
					})
				}
				if (this.quantity > this.material.materialQty) {
					return this.$refs.uToast.show({
						type: 'warning',
						message: '填写的数量大于料箱内物料数量',
						position: 'top'
					})
				}
				const submit = {
					containerCode: this.query.containerCode,
					deleteId: this.material.id,
					quantity: this.quantity
				}
				const res = await updateContainerAPI(submit)
				if (res.meta.code === 200) {
					this.show = false
					this.query.materialCode = ''
					this.query.materialBatch = ''
					this.query.materialQty = ''
					this.quantity = ''
					this.material = {}
					this.list = []
					this.showModal = false
					this.getDetail()
					this.$refs.uToast.show({
						type: 'success',
						message: res.meta.msg
					})
				} else {
					return this.$refs.uToast.show({
						type: 'warning',
						message: res.meta.msg,
						position: 'top'
					})
				}
			},
			async checkContainerFull() {
				const res = await checkContainerFullAPI(this.query.containerCode)
				return res
			},
			setContainerStatus() {
				this.showDialog = true
			},
			async confirmNotFull() {
				const submitForm = {
					containerCode: this.query.containerCode,
					isFull: 0
				}
				const res = await setContainerStatusAPI(submitForm)
				// console.log(res.meta.msg)
				if (res.meta.code === 200) {
					this.showDialog = false
					this.containerStatus = 'notFull'
					this.$refs.uToast.show({
						type: 'success',
						message: res.meta.msg
					})
				} else {
					this.showDialog = false
					return this.$refs.uToast.show({
						type: 'warning',
						message: res.meta.msg
					})
				}
			},
			async confirmFull() {
				const submitForm = {
					containerCode: this.query.containerCode,
					isFull: 1
				}
				const res = await setContainerStatusAPI(submitForm)
				// console.log(res.meta.msg)
				if (res.meta.code === 200) {
					this.showDialog = false
					this.containerStatus = 'full'
					this.$refs.uToast.show({
						type: 'success',
						message: res.meta.msg
					})
				} else {
					this.showDialog = false
					return this.$refs.uToast.show({
						type: 'warning',
						message: res.meta.msg
					})
				}
			}
		}
	}
</script>

<style lang="scss" scoped>
.selectable {
	user-select: text; /* 确保内容可选 */
}
.quantity {
	uni-view[data-v-113bc24f] {
		padding: 0 !important;
	}
}
uni-view {
	.box-input {
		width: auto;
	}
}
.buttonStyle {
	display: flex;
	gap: 20rpx;
	box-sizing: border-box;
	position: fixed;
	left: 0;bottom: 0;
	padding: 10rpx;
	width: 100%;
	background-color: #fff;
}
</style>
